<template>
	<view class="page-body bg-white">
		<view class="top-box u-p-0">
			<view class="navbar u-flex u-p-l-25">
				<u-icon @click="app.goPage(-1)" name="arrow-left"></u-icon>
			</view>
			<view class="status-box u-flex u-row-center u-col-center ">
				<image v-if="info.status_img >= 1" class="status-img  u-p-r-10" :src="'../../static/channel/images/order/' + info.status_img + '.png'"></image>
				<view class="status-txt u-p-l-10">{{info.status_txt}}</view>
			</view>
		</view>
		<view class="bg-white mt20">
			<view class="fs36 p20">基础信息</view>
			<u-cell-group :border="false">
				<u-cell-item :value="userInfo.real_name" :arrow="false">
					<view slot="title">
						<u-image shape="circle" width="100" height="100" :src="headimgurl"></u-image>
					</view>
				</u-cell-item>
				<u-cell-item title="手机号" :value="userInfo.mobile" :arrow="false"></u-cell-item>
				<u-cell-item title="当前等级" :value="proxyLevel.proxy_name" :arrow="false"></u-cell-item>
				<u-cell-item title="晋升等级" :value="proxyInfo.proxy_name" :arrow="false"></u-cell-item>
				<u-cell-item title="申请时间" :value="info.add_time" :arrow="false"></u-cell-item>
			</u-cell-group>
			<view class="fs36 p20">晋升信息</view>
			<u-cell-group :border="false">
				<u-cell-item title="晋升方式" :value="info.upgrade_type == 1 ? '业绩方式' : '保证金方式'" :arrow="false" :value-style="{color:'#C39F4F'}"></u-cell-item>
				<block v-if="info.upgrade_type != 1">
					<u-cell-item title="保证金额" :value="info.order_amount" :arrow="false" :value-style="{color:'#C39F4F'}"></u-cell-item>
					<u-cell-item title="保证金凭证" :border-bottom="false" :arrow="false"></u-cell-item>
				</block>
			</u-cell-group>
			<view v-if="info.upgrade_type != 1" class="u-p-l-20 u-p-r-20">
				<u-grid :col="3" :border="false">
					<u-grid-item v-for="(item, index) in deposit_img">
						<view class="grid-img">
							<image :src="baseUrl + item" mode="aspectFit"></image>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<u-cell-group :border="false">
				<u-cell-item title="电子合同" value="查看合同" :value-style="{color:'#C39F4F'}" @click="app.goPage('/pagesB/channel/contract/index?proxy_id='+proxy_id)"></u-cell-item>
			</u-cell-group>
			<view class="p20">
				<view v-if="isFail" class="remark">{{info.check_remark}}</view>
			</view>
		</view>

		<view class="p20">
			<u-button v-if="isFail" size="default" shape="circle" class="gold-btn" hover-class="none" @click="resetApply">重新申请</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				baseUrl: this.config.baseUrl,
				deposit_img: [],
				proxy_id:0,
				proxy_name:'',
				upgrade_type: 0,
				apply_time: '',
				isFail: false,
				remark: '',
				status_txt: '审核中',
				info:{},
				userInfo:{},
				headimgurl: '',
				proxyLevel: {},
				proxyInfo: {},
				order_id: 0
				
			}
		},
		onLoad(options) {
			this.proxy_id = options.proxy_id;
			this.upgrade_type = options.upgrade_type;
			this.getUserInfo();
			this.getApplyInfo();
		},
		onShow: function() {
			
		},
		computed: {},
		onReady() {},
		methods: {
			getUserInfo(){
				//获取登录会员信息
				this.$u.api.getProxyInfo().then(res => {
					this.userInfo = res.data.proxyInfo.byUser;
					this.proxyLevel = res.data.proxyInfo.proxyLevel;
					if (this.userInfo.headimgurl == ''){
						this.headimgurl = '/static/public/images/headimgurl.jpg';
					}else{
						this.headimgurl = this.config.baseUrl+this.proxyInfo.byUser.headimgurl;
					}
				});
			},
			getProxyLevel(){//获取可升级的层级
				this.$u.post('channel/api.proxy_users/getProxyLevel', {proxy_id:this.proxy_id}).then(res => {
					this.proxy_name = res.data.proxy_name;
				});
			},
			getApplyInfo(){
				this.$u.post('channel/api.proxy_users/getApplyInfo',{proxy_id:this.proxy_id,upgrade_type:this.upgrade_type}).then(res => {
					this.info = res.data.info;
					this.proxyInfo = res.data.proxy_info;
					this.deposit_img = this.info.imgs.split(',');
					if(this.info.status == 9){
						this.setUserCheck()
					}
					if(this.info.status == 1){
						this.isFail = true;
					}
				})
			},
			setUserCheck(){
				this.$u.post('channel/api.proxy_users/setUserCheck',{id:this.info.order_id}).then(res => {
					
				})
			},
			resetApply(){
				this.setUserCheck();
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	.page-body{
		height: auto;
	}
	.remark{
		padding: 20rpx;
		background: #F3F3F3;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #999999;
	}
	.top-box{
		height: 268rpx;
		background: linear-gradient(221deg, #F1D9AA 0%, #BE9453 100%);
		
		.navbar{
			height: 88rpx;
			background: transparent;
			box-shadow: none;
		}
		
		.status-box{
			text-align: center;
			height: 180rpx;
			.status-img{
				width: 36rpx;
				height:36rpx;
			}
			.status-txt{
				color: #744700;
				font-size: 42rpx;
			}
		}
	}
	.superior_box{
		position: relative;
		display: block;
		overflow: hidden;
		height: 200rpx;
		.headimgurl {
			width: 100rpx !important;
			height: 100rpx !important;
			border: 5rpx solid #FFFFFF;
		}
		.level{
			margin-left: 10rpx;
			font-size: 24rpx;
			color: $base-color;
			border-radius: 10rpx;
			padding: 4rpx 10rpx;
			border: 1rpx solid $base-color;
		}
		.persql{
			font-size: 23rpx;
			background: #5392f3;
			color: #FFFFFF;
		    position: absolute;
		    z-index: 9;
			padding: 0rpx 50rpx;
		    top: 28rpx;
		    right: -63rpx;
		    -webkit-transform: rotate(50deg);
		    transform: rotate(50deg);
		}
	}
	.up_box{
		border-bottom: 1px solid #f1f1f1;
		line-height: 60rpx;
		.title{
			font-size: 28rpx;
		}
		.levle_box{
			text-align: center;
			.img {
				margin: 0rpx auto;
				margin-bottom: 30rpx;
			}
			.select_level{
				font-size: 36rpx;
				font-weight: 600;
			}
			.tip{
				font-size: 23rpx;
				color: $font-color-light;
			}
		}
		.condition_box{
			.tit{
				text-align: left;
				font-size: 32rpx;
			}
			.tip{
				font-size: 26rpx;
				color: $font-color-light;
			}
		}
	}
	.grid-img{
		width: 100%;
		height: 100%;
	}
</style>